import { listScoresToStudentUsingPost } from '@/services/student-management-system/fenshumokuai';
import { SearchOutlined } from '@ant-design/icons';
import { Badge, Button, Form, Input, message, Select, Table } from 'antd';
import React from 'react';

import { AntdStatus, getTagStatusByStatus, getTextByStatus } from '@/common/ScoreStatus';
import { useModel } from '@@/exports';
import moment from 'moment';
import { useEffect, useState } from 'react';

const ScoreInfo: React.FC = () => {
  const { initialState } = useModel('@@initialState');
  const { currentUser } = initialState || {};

  const initSearchParam = {
    current: 1,
    pageSize: 6,
    sortField: 'createTime',
    sortOrder: 'desc',
    studentId: currentUser?.id ?? 0,
  };

  // 存储下拉数据
  interface optionsType {
    value: number | undefined;
    label: string | undefined;
  }

  const [queryParam, setQueryParam] = useState<API.QueryScoreDTO>({ ...initSearchParam });
  const [dataSource, setDataSource] = useState<API.ScoreVO[]>([]);
  const [total, setTotal] = useState<number>(0);
  const [statusOptions, setStatusOptions] = useState<optionsType[]>([]);

  const columns = [
    { title: '分数ID', dataIndex: 'id', key: 'id' },
    { title: '课程名称', dataIndex: 'courseName', key: 'courseName' },
    { title: '老师', dataIndex: 'teacherName', key: 'teacherName' },
    { title: '分数', dataIndex: 'score', key: 'score' },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (status: number) => (
        <Badge status={getTagStatusByStatus(status) as AntdStatus} text={getTextByStatus(status)} />
      ),
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      render: (text: Date) => (
        <>
          <div>{moment(text).format('YYYY-MM-DD')}</div>
          <div>{moment(text).format('HH:mm:ss')}</div>
        </>
      ),
    },
    {
      title: '更新时间',
      dataIndex: 'updateTime',
      render: (text: Date) => (
        <>
          <div>{moment(text).format('YYYY-MM-DD')}</div>
          <div>{moment(text).format('HH:mm:ss')}</div>
        </>
      ),
    },
  ];

  const getScoreList = async () => {
    const res = await listScoresToStudentUsingPost(queryParam);
    if (res.code === 200) {
      message.success('获取数据成功');
      setDataSource(res.data?.records ?? []);
      setTotal(res.data?.total ?? 0);
    } else {
      message.error('获取数据失败：' + res.msg);
    }
  };

  useEffect(() => {
    getScoreList();

    setStatusOptions([
      { value: 0, label: '异常' },
      { value: 1, label: '正常' },
      { value: 2, label: '审核中' },
    ]);
  }, [queryParam]);

  return (
    <div className="ManageScore">
      <Form layout="inline" onFinish={(values) => setQueryParam({ ...initSearchParam, ...values })}>
        <Form.Item name="courseName" label="课程名称">
          <Input style={{ width: '130px' }} placeholder="请输入课程名称" />
        </Form.Item>

        <Form.Item name="status" label="状态">
          <Select
            placeholder="选择状态"
            optionFilterProp="label"
            options={statusOptions}
            allowClear={true}
          />
        </Form.Item>

        <Form.Item>
          <Button icon={<SearchOutlined />} type="primary" htmlType="submit">
            搜索
          </Button>
        </Form.Item>
      </Form>

      <Table
        dataSource={dataSource}
        columns={columns}
        pagination={{
          total,
          current: queryParam.current,
          pageSize: queryParam.pageSize,
          onChange: (current, pageSize) => setQueryParam({ ...queryParam, current, pageSize }),
        }}
      />
    </div>
  );
};

export default ScoreInfo;
